<script setup>
// 导入 api
import { ref, reactive, computed } from 'vue'

// 样式对象
const styleObject = reactive({
    color: 'red',
    fontSize: '30px'
})


// 引入子组件
import Test2 from "@/components/Test2.vue"

// 响应变量
const activeClass = ref('active')
const errorClass = ref('text-danger')

// 响应变量
const baseStyles = ref('active')
const overridingStyles = ref('text-danger')

// 类对象
const classObject = reactive({
    active: true,
    'text-danger': false
})

// 点击函数
function btnClick() {
    classObject.active = !classObject.active;
    classObject['text-danger'] = !classObject['text-danger'];
}
</script>

<template>
    <div :class="classObject">绑定对象</div>
    <input type="button" value="切换" @click="btnClick" />

    <div :class="[activeClass, errorClass]">绑定列表</div>

    <Test2 class="baz boo" />

    <!-- 绑定内联样式 -->
    <div :style="styleObject">使用对象绑定内联样式</div>

    <div :style="[baseStyles, overridingStyles]">使用数组绑定内联样式</div>

</template>